<template>
  <view class="list-wrap">
    <view>
      <!-- tab 列表 -->
      <view class="tab-box">
        <u-tabs
          :list="classHomeList"
          :readMsg="readMsg"
          :current="current"
          :fontSize="32"
          :isScroll="true"
          bgColor="#f5f5f5"
          inactiveColor="#999999"
          @change="handleToatlTabChange"
          :active-item-style="{ color: '#333' }"
          :bar-style="{ background: '#FEDD00', borderRadius: '100rpx' }"
        />
      </view>
      <view class="list">
        <view
          v-for="(item, index) in items"
          :key="index"
          class="item-box"
          @tap="handleToDetail(item)"
        >
          <image class="item-box__img" :src="item.thumb" />
          <view class="item-box__content">
            <view class="item-box__content--title">
              <view
                :class="[
                  'tag',
                  item.post_type_label === 'CAR' ||
                  item.post_type_label === 'ACTIVITY'
                    ? 'show-join'
                    : 'show-acticle',
                ]"
                >{{ item.post_type_name }}</view
              >
              <view class="title">{{ item.title }}</view>
            </view>
            <view class="item-box__content--time">{{ item.created_at }}</view>
          </view>
        </view>
        <view class="full-green" v-if="!isEmpty">
          <load-more :status="loadingStatus"></load-more>
        </view>
        <view v-else>
          <u-empty description="暂无内容～"></u-empty>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import uTabs from "@/basic-components/u-tabs/index.vue";
import loadMore from "@/components/load-more.vue";
import uEmpty from "@/basic-components/u-empty/index.vue";

import moreLoadMixins from "@/common/load-more";
import {
  ATTACHMENT_TYPE,
  ARTICLE_LIST,
  UNREAD,
} from "@/api/home";
import { momentDate } from "@/tool";

export default {
  components: {
    uTabs,
    loadMore,
    uEmpty,
  },
  mixins: [moreLoadMixins],
  data() {
    return {
      curId: '',
      type: '',
      current: 0,
      classHomeList: [],
      // 未读消息
      readMsg: {},

      // 弹窗
      btnLoad: false,
    };
  },

  async onLoad({ curId,type }) {
    // 类型tab列表
    const classHomeListTemp = await this.getTabTypeList();
    for(let index=0; index<classHomeListTemp.length; index++){
      if(classHomeListTemp[index].id === +curId){
        this.current = index;
        break;
      }
    }
    this.curId = curId;
    this.type=type;

    // 列表信息
    this.resetInit();
  },
  onShow() {
    // 未读消息
    this.getMsgRead();
  },
  async onPullDownRefresh() {
    // 初始化
    await this.resetInit();
    // 未读消息
    this.getMsgRead();
    uni.stopPullDownRefresh();
  },
  methods: {
    /**
     * 消息读取
     */
    getMsgRead() {
      let params = {};
      params["region_id"] = uni.getStorageSync("regionId");
      params["post_type"] = [
        "NOTICE",
        "ACTIVITY",
        "CAR",
        "REPAIR",
        "TRAIN",
        "OTHER",
        "COUPON",
        "ERRAND",
      ];
      params["time"] = parseInt(new Date().getTime() / 1000);
      this.$http.get(UNREAD, params).then((res) => {
        this.readMsg = res.data;
      });
    },
    handleToatlTabChange(index, id) {
      this.current = index;
      this.curId = id;
      this.resetInit();
    },
    async getTabTypeList() {
      let classHomeList= [{ id: 0, name: "全部" }];
      const { data } = await this.$http.get(ATTACHMENT_TYPE, {
        per_page: 100,
      });
      //暂时屏蔽全部tab
      // classHomeList = classHomeList.concat(data || []);
      // this.classHomeList = classHomeList;
      this.classHomeList=data;
      return data;
    },

    getClassHome(){
      const [ classHome ] = this.classHomeList.filter((item)=>{
        return item.id === this.curId;
      });
      return classHome || {};
    },

    initData() {
      // 列表搜索
      const params = {};
      params.page = this.pages.currentPage;
      params.per_page = this.pages.perPage;
      params.region_id = uni.getStorageSync("regionId");

      if (this.curId) {

        params.post_type = this.curId;
        // 拼车和活动时
        if ( this.curId === 3 ||  this.curId === 2) {
          params.status = 1;
        }
      }

      return this.$http.get(ARTICLE_LIST, params).then((res) => {
        const { data, last_page, current_page, total } = res;
        if (data && data.length) {
          data.forEach((item) => {
            item.created_at = momentDate(item.created_at);
          });

          this.items = this.items.concat(data);
          this.pages.currentPage=current_page+1;
        }
        return {
          perPage: this.pages.perPage,
          currentPage: this.pages.currentPage,
          hasNext: !last_page === current_page,
          empty: current_page === 1 && total === 0,
        };
      });
    },
    handleToDetail(item) {
      const type = item.post_type_label;
      this.$navigate({
        page: "detail",
        params: {
          id: item.id,
          type,
        },
      });
    },
  },
};
</script>

<style lang="less">
.list-wrap {
  padding-top: 10rpx;
  .list {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20rpx;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    .item-box {
      display: flex;
      align-items: center;
      width: 710rpx;
      height: 200rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 16rpx;
      box-sizing: border-box;
      background-color: #ffffff;
      &__img {
        flex-shrink: 0;
        height: 100%;
        width: 180rpx;
        margin-right: 20rpx;
        border-radius: 10rpx;
      }
      &__content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        flex: 1;
        &--title {
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          white-space: normal !important;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          .tag {
            display: inline-block;
            color: #ffffff;
            font-size: 24rpx;
            padding: 4rpx 10rpx;
            margin-top: -4rpx;
            border-radius: 8rpx;
            transform-origin: left center;
            transform: scale(0.8);
            &.show-acticle {
              background: linear-gradient(135deg, #ff70ac 0%, #ff4666 100%);
            }
            &.show-join {
              background: linear-gradient(135deg, #ffad64 0%, #ff6034 100%);
            }
          }
          .title {
            display: inline;
            font-size: 28rpx;
            font-weight: 500;
          }
        }
        &--time {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
  }

  .new-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12rpx 20rpx;
    &__li {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      height: 150rpx;
      margin: 0 15rpx;
      font-size: 36rpx;
      border-radius: 12rpx;
      box-shadow: 0 0 16rpx #eeeeee;
      background-color: #fedd00;
    }
  }
  .u-scroll-view{
    text-align:center;
  }
}
</style>
